<template>
	<div class="container">
		<!-- 顶部大图 -->
		<div class="image-container">
			<img src="/static/suyuan/suyuan.jpg" class="full-image" alt="溯源图片" />
		</div>

		<!-- 查询区域 -->
		<view class="search-container">
			<el-input v-model="input1" style="width: 250px;height: 40px;" placeholder="请输入条形码查询"
				:suffix-icon="Search" />
			<el-button type="warning" round style="width: 250px;margin: 10px 0;"
				@click="goToSuyuanXiangqing">点击查询</el-button>
		</view>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { Search } from '@element-plus/icons-vue'
	import { useRouter } from 'vue-router'

	const input1 = ref('')
	const router = useRouter()

	const goToSuyuanXiangqing = () => {
		router.push('/pages/index/suyuanxiangqing')
	}
</script>

<style scoped>
	.container {
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
	}

	.image-container {
		width: 95%;
		margin: 0 8px;
		height: 200px;
		margin-bottom: 20px;
		overflow: hidden;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.full-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.search-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>